<template>
  <view class="report-pane">
    <charttips :name="orderNumTooltip.name" :tooltip="orderNumTooltip.tip" placement="bottom" />
    <uChartstrackColumn
      v-if="inited"
      :canvasId="canvasId"
      :uChartData="uChartData"
      :options="options"
      :tooltipFormat="canvasId === 'orderRevenue' ? 'tooltipFormatStrack' : 'tooltipFormatorderNum'"
    >
      <!-- 图例部分 -->
      <view class="chart-legend">
        <view
          class="chart-legend-item"
          v-for="(item, index) in uChartData.series"
          :key="index"
          :style="{ backgroundColor: item.show ? '#f4f7fa' : '#fff' }"
        >
          <view class="color-block" :style="{ backgroundColor: item.textColor }"></view>
          <view class="chart-legend-content" :style="{ color: item.show ? '#1E1E1E' : '#DCDEE8' }">
            {{ item.name }}
          </view>
        </view>
      </view>
    </uChartstrackColumn>
  </view>
</template>

<script>
  import uChartstrackColumn from '../components/uChartstrackColumn.vue'
  import charttips from '../components/charttips.vue'
  let yaxisdata = { 携程: [], 飞猪: [], 哈啰: [], 悟空: [], 铁行: [], 滴滴: [], 飞租: [], 其他: [], 自营: [] }
  export default {
    props: {
      amount: {
        type: Array,
        default() {
          return []
        },
      },
      colors: {
        type: Array,
        default() {
          return ['#00B2FF', '#81E2FF', '#FFE180', '#F68B8B', '#56E2A8', '#546570', '#76C204', '#B5C4C8', '#3072F6']
        },
      },
      canvasId: {
        type: String,
        default: '',
      },
      orderNumTooltip: {
        type: Object,
        default: () => {},
      },
      total: {
        type: Array,
        default: () => [],
      },
      pagePath: String,
    },
    components: {
      uChartstrackColumn,
      charttips,
    },
    data() {
      return {
        inited: false,
        options: {
          color: this.colors,
          yAxis: {
            data: [
              {
                title: '',
              },
            ],
          },
        },
        data: {
          categories: [],
          series: [
            {
              name: '携程',
              textColor: '#00B2FF',
              show: true,
              data: yaxisdata['携程'],
              amount: [],
            },
            {
              name: '哈啰',
              textColor: '#81E2FF',
              show: true,
              data: yaxisdata['哈啰'],
              amount: [],
            },
            {
              name: '飞猪',
              textColor: '#FFE180',
              show: true,
              data: yaxisdata['飞猪'],
              amount: [],
            },
            {
              name: '悟空',
              textColor: '#F68B8B',
              show: true,
              data: yaxisdata['悟空'],
              amount: [],
            },
            {
              name: '铁行',
              textColor: '#56E2A8',
              show: true,
              data: yaxisdata['铁行'],
              amount: [],
            },
            {
              name: '滴滴',
              textColor: '#546570',
              show: true,
              data: yaxisdata['滴滴'],
              amount: [],
            },
            {
              name: '飞租',
              textColor: '#76C204',
              show: true,
              data: yaxisdata['飞租'],
              amount: [],
            },
            {
              name: '其他',
              textColor: '#B5C4C8',
              show: true,
              data: yaxisdata['其他'],
              amount: [],
            },
            {
              name: '自营',
              textColor: '#3072F6',
              show: true,
              data: yaxisdata['自营'],
              amount: [],
            },
          ],
        },
      }
    },
    watch: {
      amount: {
        handler(newVal) {
          this.amountHandler(newVal)
        },
        deep: true,
        immediate: true,
      },
      canvasId: {
        handler(newVal) {
          this.options.yAxis.data[0].title = newVal === 'orderRevenue' ? '单位（元）' : '单位（个）'
        },
        deep: true,
        immediate: true,
      },
    },
    methods: {
      // 金额监听处理函数
      amountHandler(newVal) {
        if (newVal?.length > 0) {
          this.data.categories = []
          yaxisdata = { 携程: [], 飞猪: [], 哈啰: [], 悟空: [], 铁行: [], 滴滴: [], 飞租: [], 其他: [], 自营: [] }
          newVal.map((item) => {
            if (this.data.categories.indexOf(item.date) < 0) {
              this.data.categories.push(item.date)
            }
            yaxisdata[item.channelName].push(item.data)
          })

          this.data.series.map((item) => {
            return Object.assign(item, { amount: this.total, data: yaxisdata[item.name] })
          })
          this.uChartData = this.data
          // 判断当前页面是否为首页
          setTimeout(() => {
            if (this.pagePath) {
              const pages = getCurrentPages()
              var currentRoute = pages[pages.length - 1].route
              if (currentRoute == this.pagePath) {
                this.inited = true
              }
            } else {
              this.inited = true
            }
          }, 0)
        }
      },
      onChangeBar(item) {
        this.uChartData.series.map((childItem) => {
          if (item.name === childItem.name) {
            return Object.assign(childItem, { show: !childItem.show })
          }
        })
      },
      onShow() {
        console.log('onShow')
        if (!this.inited) {
          this.amountHandler(this.amount)
        }
      },
    },
    mounted() {
      uni.$on('onShow', this.onShow)
    },
    unmounted() {
      uni.$off('onShow', this.onShow)
    },
  }
</script>

<style lang="less" scoped>
  .charts-column {
    .charts-column-content {
      height: 600rpx;
    }
  }
  .chart-legend {
    position: relative;
    margin-top: 20rpx;
    .chart-legend-item {
      width: calc(33.3% - 15rpx);
      border-radius: 8rpx;
      padding: 18rpx 0rpx 18rpx 68rpx;
      position: relative;
      margin-bottom: 20rpx;
      margin-right: 20rpx;
      display: inline-block;
      .color-block {
        width: 36rpx;
        height: 20rpx;
        display: inline-block;
        position: absolute;
        top: 26rpx;
        left: 24rpx;
      }
      .chart-legend-content {
        font-size: 24rpx;
        font-weight: 400;
        color: #191c27;
      }
    }
    .chart-legend-item:nth-child(3n) {
      margin-right: 0;
    }
    .chart-legend-item:nth-last-child(-n + 3) {
      margin-bottom: 0;
    }
  }
</style>
